<template>
  <div class="map-container">
    <div class="chart-box" ref="chart"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
import { find } from "lodash";

let myChart;

export default {
  data() {
    return {
      areaCode: 350000, // 父级编码
      parentGeoData: {}, // 父级geo数据
      currentGeoData: {}, // 当前geo数据
      mapOptions: {}, // 地图配置
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  },
  methods: {
    // 获取父级轮廓数据
    async getParentGeoData() {
      const res = await axios.get(`/mapfile/single/${this.areaCode}.json`);
      this.parentGeoData = res.data;
      return res.data;
    },
    // 获取地图数据
    async getCurrentGeoData() {
      const res = await axios.get(`/mapfile/${this.areaCode}.json`);
      this.currentGeoData = res.data;
      console.log("this.currentGeoData", this.currentGeoData);
      return res.data;
    },
    // 初始化图标
    async initChart() {
      Promise.all([this.getParentGeoData(), this.getCurrentGeoData()]).then(
        (res) => {
          myChart = echarts.init(this.$refs["chart"]);
          this.mapOptions = {
            width: "58%",
            aspectScale: 1.3, // 地图的长宽
            geo: [
              {
                map: "MapContour",
                name: "地图轮廓",
                roam: false, // 是否可缩放
                // aspectScale: 1.3, // 地图的长宽比
                zoom: 0.95, // 缩放比例
                z: 1,
                slient: false,
                label: {
                  show: false,
                },
                itemStyle: {
                  areaColor: {
                    type: "radial",
                    x: 0.55,
                    y: 0.15,
                    r: 1.2,
                    colorStops: [
                      {
                        offset: 0.2,
                        color: "rgba(64, 177, 221, 0)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(64, 177, 221, 0.5)", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                  borderColor: "#40B1DD",
                  // borderWidth: 1.6,
                  borderWidth: 3,
                  shadowBlur: 35,
                  shadowColor: "rgba(0, 0, 0, 1)",
                  shadowOffsetX: 30,
                  shadowOffsetY: 30,
                  label: {
                    show: false,
                    textShadowBlur: 5,
                    textShadowColor: "#000",
                  },
                },
                emphasis: {
                  disabled: true,
                },
              },
              {
                map: "Map",
                name: "地图",
                roam: false, // 是否可缩放
                zoom: 0.95,
                z: 5,
                slient: false,
                label: {
                  show: false,
                },
                itemStyle: {
                  areaColor: "rgba(255, 255, 255, 0)", // 区域颜色，带透明度
                  borderColor: "rgba(255, 255, 255, 0.5)", // 边框颜色，带透明度
                  borderWidth: 1, // 边框宽度
                },
                emphasis: {
                  // disabled: true,
                  label: {
                    show: false,
                  },
                  itemStyle: {
                    areaColor: "rgba(255, 255, 255, 0)", // 区域颜色，带透明度
                  },
                },
              },
            ],
            series: [],
          };
          echarts.registerMap("MapContour", this.parentGeoData);
          echarts.registerMap("Map", this.currentGeoData);
          myChart.setOption(this.mapOptions);
          // myChart.off("click");
          // myChart.on("click", this.handleClick);
          // myChart.off("mouseover");
          // myChart.on("mouseover", this.handleMouseover);
          // myChart.off("mouseout");
          // myChart.on("mouseout", this.handleMouseout);
        }
      );
    },
    resizeChart() {
      if (myChart) {
        myChart.resize();
      }
    },
    // 地图点击事件
    handleClick(params) {
      console.log("handleClick", params);
    },
    // 地图鼠标移入事件
    handleMouseover(params) {
      console.log("handleMouseover", params);
    },
    // 地图鼠标移出事件
    handleMouseout(params) {
      console.log("handleMouseout", params);
    },
  },
};
</script>

<style lang="scss" scoped>
.map-container {
  height: 100%;
  .chart-box {
    height: 100%;
    background: url(~@/assets/images/screen/bg.png) no-repeat center center;
    background-size: cover;
  }
}
</style>
